<template>
  <view class="container">
    <shopro-navbar :background="{ background: 'none' }" :backTextStyle="{color: '#fff'}" backIconColor="#fff">
      <view slot="content" style="color: #fff;text-align: center;width: 100%;">
        快速订购
      </view>
    </shopro-navbar>
    <view class="big-title">添加商品</view>
    <view class="buy-lists">
      <view v-for="(v,k) in lists" class="buy-item">
        <input class="buy-name" @input="nameInput" :data-key="k" type="text" :value="v.name" placeholder="请输入商品名称、关键词">
        <input class="buy-nums" @input="numsInput" :data-key="k" type="number" :value="v.nums" placeholder="请输入商品数量">
      </view>
    </view>
    <view class="add-line" @tap="addRow">再添加一款商品</view>
    <view class="tel-box">
      <textarea @input="telInput" placeholder="请留下您的联系方式（手机号、微信号）"></textarea>
    </view>
    <view class="submit" @tap="submit">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lists: [{name: '', nums: ''}, {name: '', nums: ''}, {name: '', nums: ''}, {name: '', nums: ''}],
      contact: ''
    };
  },
  onLoad() {

  },
  methods: {
    nameInput(e){
      this.lists[e.target.dataset.key].name = e.detail.value;
    },
    numsInput(e){
      this.lists[e.target.dataset.key].nums = e.detail.value;
    },
    telInput(e){
      this.contact = e.detail.value;
    },
    addRow(){
      this.lists.push({
        name : '',
        nums : ''
      })
    },
    submit() {
      let that = this;
      that.$http('other.fastBuyAdd', {
        lists : that.lists,
        contact : that.contact
      }, '提交中...').then(res => {
        uni.hideKeyboard();
        if (res.code === 1) {
          that.$u.toast('提交成功');
        }
      });
    }
  }
}
</script>

<style>
page{
  background-image: url("https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/user/user-bg.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
<style lang="scss">
.big-title{
  margin-top: 120rpx;
  margin-bottom: 70rpx;
  color: #fff;
  font-size: 46rpx;
  text-align: center;
}
.buy-item{
  display: flex;
  border: 8rpx solid #fbd0b0;
  border-radius: 30rpx;
  background: #fff;
  margin: 10rpx 20rpx;
  padding: 20rpx 20rpx;
  .buy-name{
    width: 1rpx;
    flex-grow: 1;
    height: 70rpx;
    border: 1rpx solid #c9c9c9;
    font-size: 24rpx;
    text-align: center;
  }
  .buy-nums{
    width: 220rpx;
    height: 70rpx;
    font-size: 24rpx;
    border: 1rpx solid #c9c9c9;
    margin-left: 20rpx;
    text-align: center;
  }
}
.add-line{
  text-align: center;
  color: #999999;
  font-size: 24rpx;
  margin-top: 30rpx;
}
.tel-box{
  margin: 200rpx 20rpx 40rpx 20rpx;
  textarea{
    padding: 20rpx;
    width: 100%;
    color: #999;
    background: #fff;
    height: 140rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}
.submit{
  width: 400rpx;
  height: 90rpx;
  margin: 50rpx auto 0 auto;
  line-height: 80rpx;
  text-align: center;
  border: 8rpx solid #fbd0b0;
  border-radius: 14rpx;
  color: #fbd0b0;
}
</style>
